<template>
    <view class="container">
        <view class="avatar">
            <image src="/static/images/user-circle.png"></image>
        </view>

        <view class="form">
            <uv-form labelPosition="left" :model="business" :rules="rules" ref="uForm">

                <uv-form-item label="手机" prop="mobile" borderBottom>
                    <uv-input type="text" v-model="business.mobile" border="none" placeholder="请输入手机号"></uv-input>
                </uv-form-item>

                <uv-form-item label="密码" prop="password" borderBottom>
                    <uv-input type="password" v-model="business.password" border="none" placeholder="请输入密码"></uv-input>
                </uv-form-item>

                <view style="margin-top: 25px;">
                    <uv-button type="warning" @click="OnSubmit">绑定</uv-button>
                </view>
            </uv-form>
        </view>

        <view class="agreement">
            <uv-checkbox-group v-model="AgreementArr">
                <uv-checkbox name="agreement" label="我已阅读并同意" shape="circle" />
                <navigator class="url" url="/pages/business/agreement">用户服务协议、隐私政策</navigator>
            </uv-checkbox-group>
        </view>

        <!-- 信息提示 -->
        <uv-toast ref="NoticeRef"></uv-toast>
    </view>
</template>

<script setup>
const business = reactive({
    mobile:'',
    password:''
});

const AgreementArr = ref([]);

const uForm = ref(null);

const openid = ref('');

const NoticeRef = ref(null);

const rules = reactive({
    mobile:[
        {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
                // 上面有说，返回true表示校验通过，返回false表示不通过
                // uni.$uv.test.mobile()就是返回true或者false的
                if(value)
                {
                    return uni.$uv.test.mobile(value);
                }else{
                    return false;
                }
            },
            type: 'string',
            required: true,
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
        }
    ],
    'password':{
        type: 'string',
        required: true,
        message: '请填写密码',
        trigger: ['blur', 'change']
    },
});

onLoad((options) =>
{
    openid.value = options?.openid ? options.openid : '';
})

const OnSubmit = () =>
{
    uForm.value.validate().then(async () =>
    {
        if(AgreementArr.value.length === 0)
        {
            NoticeRef.value.show({
                type:'error',
                message:'请先同意服务协议'
            });

            return false;
        }

        if(!openid.value)
        {
            NoticeRef.value.show({
                type:'error',
                message:'登录凭证不存在'
            });

            return false;
        }

        // 调用uni的api 懒加载
        uni.showLoading({
            title:'绑定中',
            mask:true,
            success:async () =>
            {
                const params = {
                    ...business,
                    openid:openid.value
                }

                const result = await uni.$uv.http.post('/business/bind',params);

                uni.hideLoading();

                if(result.code === 1)
                {
                    NoticeRef.value.show({
                        type:'success',
                        message:result.msg,
                        complete:() =>
                        {
                            uni.navigateBack({
                                delta:1
                            });
                        }
                    });
                }else{
                    NoticeRef.value.show({
                        type:'error',
                        message:result.msg
                    });
                }
            }
        });
    }).catch(() => {});
}
</script>

<style>
page{
    background-color: #f8fafe;
}

.container .avatar {
    text-align: center;
    background-color: #fff;
    padding-bottom: 20px;
}

.avatar image{
    width: 80px;
    height: 80px;
    margin: 50px 0 20px;
}

.form{
    margin: 0 50rpx;
    box-sizing: border-box;
}

.btn{
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* #ifdef H5 || APP-PLUS */
.u-icon{
    margin-left: 10px;
}
/* #endif */

.agreement{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    font-size: 14px;
}

navigator{
    color: #33ccff;
}

:deep(.uv-checkbox-group--row){
    justify-content: center;
}
</style>